<script setup lang="tsx">
import { ref, onMounted } from 'vue'
import { ContentWrap } from '@/components/ContentWrap'
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus'
import { getListApi, getModifyApi } from '@/api/settings'
const formRef = ref<InstanceType<typeof ElForm>>()

defineOptions({
  name: 'Payment'
})
const form = ref({})
onMounted(() => {
  getListApidata()
})
const getListApidata = async () => {
  const res = await getListApi()
  form.value = res.data.config
}
const onSubmit = async () => {
  const valid = await formRef.value?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const res = await getModifyApi({
      id: form.value.id,
      appid: form.value.appid,
      app_secret: form.value.app_secret,
      mch_id: form.value.mch_id,
      api_key: form.value.api_key,
      api_cert: form.value.api_cert,
      api_cert_pem: form.value.api_cert_pem
    })
    if (res) {
      ElMessage.success(res.msg)
      getListApidata()
    }
  }
}
</script>

<template>
  <ContentWrap title="支付配置">
    <ElForm ref="formRef" :model="form" label-width="auto" style="max-width: 600px">
      <ElFormItem label="小程序AppID" required>
        <ElInput v-model="form.appid" placeholder="请输入" />
      </ElFormItem>
      <ElFormItem label="小程序AppSecret" required>
        <ElInput v-model="form.app_secret" placeholder="请输入" />
      </ElFormItem>
      <ElFormItem label="微信号商品号MCHID" required>
        <ElInput v-model="form.mch_id" placeholder="请输入" />
      </ElFormItem>
      <ElFormItem label="微信支付秘钥 APIKEY">
        <ElInput v-model="form.api_key" placeholder="请输入" />
      </ElFormItem>
      <ElFormItem label="证书文件cert">
        <ElInput v-model="form.api_cert" type="textarea" placeholder="请输入" />
      </ElFormItem>
      <ElFormItem label="证书文件key">
        <ElInput v-model="form.api_cert_pem" type="textarea" placeholder="请输入" />
      </ElFormItem>
      <ElFormItem>
        <div>温馨提示：修改时请注意，若修改不当则会影响小程序使用，请不要私自修改此模块</div>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="onSubmit">保存</ElButton>
      </ElFormItem>
    </ElForm>
  </ContentWrap>
</template>
